@import "variables";

.class-detail {
  .top-tabs {
    display: flex;
    justify-content: center;
    align-items: center;
    height: pxTorem(89);
  }
  .tab {
    flex: 1;
    height: pxTorem(88);
    text-align: center;
    line-height: pxTorem(88);
    font-size: standard($f, f3);
    color: color($h5, c2);
    &.tabing {
      color: color($h5, c1);
    }
  }
}

.teacher-info {
  padding: pxTorem(40) pxTorem(20) 0 pxTorem(40);
  border-top: pxTorem(15) solid color($h5, c9);
  .basic-info {
    display: flex;
    .avatar {
      width: pxTorem(202px);
      height: pxTorem(270px);
    }
    .info {
      flex: 1;
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      //margin-left: pxTorem(40);
      padding: 0 pxTorem(40);
      font-size: standard($f, f3);
      color: color($h5, c4);
      div {
        .key {
          display: inline-block;
          width: pxTorem(160);
          color: color($h5, c2);
        }
      }
    }
  }
}

.intro {
  margin-top: pxTorem(60px);
  font-size: standard($f, f3);
  .title {
    color: color($h5, c4);
  }
  .intro-content {
    margin-top: pxTorem(26px);
    color: color($h5, c2);
    line-height: pxTorem(35);
  }
}

.avatars-box {
  display: flex;
  align-items: center;
  height: pxTorem(140);
  overflow-x: scroll;
  white-space: nowrap;
  li {
    display: inline-block;
    background: #fff;;
    width: pxTorem(100);
    height: pxTorem(100);
    border-radius: 50%;
    box-sizing: border-box;
    margin-left: pxTorem(15);
    &.avatar-itm {
      border: pxTorem(3) solid color($h5, c1);
      padding: 2px;
    }
    .avatar-min {
      width: 100%;
      height: 100%;
      border-radius: 100%;
    }
  }
}

.teacher-comment {
  .teacher-comment-total {
    padding: pxTorem(30) pxTorem(24) 0 pxTorem(24);
    font-size: standard($f, f6);
    color: color($h5, c4);
  }
}

.teach-plan {
  .plan-header {
    padding: 0 0 pxTorem(30);
    .plan-title {
      padding-bottom: pxTorem(10px);
    }
    seed-tab {
      position: relative;
      display: block;
      a {
        font-size: standard($f, f3);
      }
      .seed-tab {
        //width: 75%;
        padding-right: 25%;
        .seed-tab-title:before {
          width: pxTorem(40);
          bottom: 3px;
          height: 3px;
          left: 50%;
          transform: translateX(-50%);
        }
      }
      .button-edit {
        position: absolute;
        right: pxTorem(50px);
        top: pxTorem(30px);
        @include icon(44, 44, '#{$icons-path}/circle_deit.png')
      }
      .seed-tab-item {
        position: relative;
        min-height: pxTorem(160px);
        padding: pxTorem(24px) pxTorem(24px) 0;
        .each-tab {
          line-height: 1.4;
        }
        .tab-show {
          overflow-y: scroll;
          height: 100%;
        }
        .item-no-data {
          line-height: pxTorem(140px);
          text-align: center;
          color: color(c4);
          @include font-size(f4);
        }
        .text-switch {
          color: color(c1);
          @include font-size(f4);
        }
      }
    }
  }
  .plan-content {
    .content-title {
      font-size: standard($f, f6);
      color: color(c4);
      padding: pxTorem(20px) pxTorem(24px) pxTorem(8px);
      //padding-bottom: pxTorem(8px);
    }
    .content-item {
      padding: pxTorem(20px) 0;
      .subject-name {
        font-size: standard($f, f2);
        @include set-color(c2);
        padding-right: pxTorem(64px);
        @include over-ellipsis();
        flex: 1;
      }
      .teacher-name {
        font-size: standard($f, f4);
        @include set-color(c4);

      }
    }
  }
}
